<template>
    <el-form label-width="96px" label-position="right" class="zw-form-layout">
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item label="商品信息">
                    <el-input
                        v-model.trim="model.keywords"
                        clearable
                        placeholder="请输入商品名称/商品ID/外部商品编码" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="商品类目">
                    <el-tree-select
                        v-model="model.classId"
                        ref="treeSelectRef"
                        filterable
                        lazy
                        @visible-change="classVisibleChangeHandle"
                        @node-expand="classNodeExpandHandle"
                        :load="classLoadHandle"
                        :props="classTreeProps" />
                </el-form-item>
            </el-col>
            <el-col v-show="collapsed" :span="8">
                <el-form-item label="商品分组">
                    <el-tree-select
                        v-model="model.categoryId"
                        filterable
                        lazy
                        @visible-change="categoryVisibleChangeHandle"
                        @node-expand="categoryNodeExpandHandle"
                        :load="categoryLoadHandle"
                        :props="categoryTreeProps" />
                </el-form-item>
            </el-col>
            <template v-if="collapsed">
                <el-col :span="8">
                    <el-form-item label="价格">
                        <div class="scope_box">
                            <el-input-number
                                v-model="model.priceLeft"
                                placeholder="请输入"
                                :controls="false"
                                :precision="2"
                                :min="0"
                                :max="999999999" />
                            <div class="line">-</div>
                            <el-input-number
                                v-model="model.priceRight"
                                placeholder="请输入"
                                :controls="false"
                                :precision="2"
                                :min="0"
                                :max="999999999" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="库存">
                        <div class="scope_box">
                            <el-input-number
                                v-model="model.goodsStockSmall"
                                placeholder="请输入"
                                :controls="false"
                                :precision="0"
                                :min="0"
                                :max="999999999" />
                            <div class="line">-</div>
                            <el-input-number
                                v-model="model.goodsStockBig"
                                placeholder="请输入"
                                :controls="false"
                                :min="0"
                                :max="999999999" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="销量">
                        <div class="scope_box">
                            <el-input-number
                                v-model="model.sellLeft"
                                placeholder="请输入"
                                :controls="false"
                                :precision="0"
                                :min="0"
                                :max="100000" />
                            <div class="line">-</div>
                            <el-input-number
                                v-model="model.sellRight"
                                placeholder="请输入"
                                :controls="false"
                                :precision="0"
                                :min="0"
                                :max="100000" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否公开展示">
                        <el-select v-model="model.isShow">
                            <el-option v-for="item in goodsOpenShowOptions" :key="item.value" v-bind="item" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </template>
            <el-col>
                <el-button type="primary" @click="searchHandle">查询</el-button>
                <el-button plain @click="resetHandle">清空</el-button>
                <el-button class="search_isOpen" type="primary" :text="true" @click="collapsed = !collapsed">
                    {{ collapsed ? '收起' : '展开' }}
                    <el-icon class="el-icon--right"><component :is="collapsed ? ArrowUp : ArrowDown" /> </el-icon>
                </el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup>
import {
    getGoodsClassListHook,
    getGoodsClassChildListHook,
    getGoodsCategoryListHook,
    getGoodsCategoryChildListHook
} from '@/hooks/goods';
import { packSelectObjUtil, throttle, useVModel } from '@/commons/utils.js';
import constants from '@/commons/constants';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { ref } from 'vue';

const props = defineProps({
    modelValue: { type: Object, required: true }
});
const emit = defineEmits(['update:modelValue', 'search', 'reset']);
const model = useVModel(props, emit, 'modelValue');
const goodsOpenShowOptions = packSelectObjUtil(constants.GOODS_OPEN_SHOW);
const collapsed = ref(false);
const treeSelectRef = ref(null);
const classTreeProps = {
    value: 'id',
    label: 'name',
    children: 'children',
    isLeaf: 'hasChildren',
    disabled: 'disabled'
};
const categoryTreeProps = {
    value: 'id',
    label: 'categoryName',
    children: 'children',
    isLeaf: 'hasChildren',
    disabled: 'disabled'
};
/******************************* 商品类目-start  *******************************/
const classChildRequestSuccess = {};
const classChildParams = {
    classIds: []
};
let classNode;
let classResolve;
let classRequestFlag = true;
const classLoadHandle = async (node, resolve) => {
    if (classRequestFlag) {
        classNode = node;
        classResolve = resolve;
        return resolve([{ name: '全部类目', id: 0, hasChildren: true }]);
    }
    if (node.level === 0) {
        let data = await getGoodsClassListHook({ page: 1, perPage: 999 });
        const list = data.list.map(item => ({ ...item }));
        resolve(list);
        return;
    }
    const id = node.data.id;
    classChildParams.classIds = [id];
    const childList = await getGoodsClassChildListHook(id);
    classChildRequestSuccess[id] = childList[0].id;
    resolve(childList);
};

const classVisibleChangeHandle = async visible => {
    classRequestFlag = false;
    if (visible && classNode.childNodes.length <= 1) {
        classLoadHandle(classNode, classResolve);
    }
};

// 展开
const classNodeExpandHandle = (data, node) => {
    if (classChildRequestSuccess[data.id]) return;
    node.loaded = false;
    node.expand();
};
/******************************* 商品类目-end  *******************************/

/******************************* 商品分组-start  *******************************/
const categoryChildRequestSuccess = {};
const categoryChildParams = {
    categoryIds: []
};
let categoryNode;
let categoryResolve;
let categoryRequestFlag = true;
const categoryLoadHandle = async (node, resolve) => {
    if (categoryRequestFlag) {
        categoryNode = node;
        categoryResolve = resolve;
        return resolve([{ categoryName: '全部分组', id: 0, hasChildren: true, disabled: false }]);
    }
    if (node.level === 0) {
        let data = await getGoodsCategoryListHook({ page: 1, perPage: 999 });
        const list = data.list.map(item => ({ ...item, disabled: item.hasChildren }));
        resolve(list);
        return;
    }
    const id = node.data.id;
    categoryChildParams.categoryIds = [id];
    const childList = await getGoodsCategoryChildListHook(id);
    categoryChildRequestSuccess[id] = childList[0].id;
    resolve(childList);
};
const categoryVisibleChangeHandle = async visible => {
    categoryRequestFlag = false;
    if (visible && categoryNode.childNodes.length <= 1) {
        categoryLoadHandle(categoryNode, categoryResolve);
    }
};
// 展开
const categoryNodeExpandHandle = (data, node) => {
    if (categoryChildRequestSuccess[data.id]) return;
    node.loaded = false;
    node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
};
/******************************* 商品分组-end  *******************************/
const searchHandle = throttle(() => {
    emit('search');
}, 1000);
const resetHandle = throttle(() => {
    emit('reset');
}, 1000);
</script>
<style lang="scss" scoped>
.el-form {
    padding: 16px 24px 16px 18px;
    margin-bottom: 16px;

    .el-row {
        margin: -8px -10px;

        .el-col {
            margin: 8px 0;

            &:last-of-type {
                flex: auto;
                text-align: right;
            }

            .el-form-item {
                margin-bottom: 0;

                .el-form-item__label-wrap {
                    .el-form-item__label {
                        font-size: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                    }
                }

                .el-form-item__content {
                    .el-input,
                    .el-select,
                    .el-date-editor {
                        width: 100%;
                    }
                    .scope_box {
                        display: flex;
                        width: 100%;

                        .line {
                            margin: 0 6px;
                        }
                        .el-input-number {
                            flex: 1;
                            :deep(.el-input__inner) {
                                text-align: left;
                            }
                        }
                    }
                }
            }

            .el-button--text {
                border: 1px solid transparent;
            }
            .search_isOpen {
                padding: 0;
                margin-left: 8px;
                .el-icon {
                    margin-left: 5px;
                }
            }
        }
    }

    &__cascader-panel {
        display: none;
    }
}
</style>
